<template>
    <h3>用户总数量:{{ total }}</h3>
    <el-table :data="userData" style="width: 100%">
        <el-table-column prop="userid" label="用户ID" />
        <el-table-column prop="username" label="用户姓名" />
        <el-table-column prop="tel" label="电话号码" />
        <!-- <el-table-column prop="qq" label="QQ号" /> -->
        <!-- <el-table-column prop="wx" label="微信" /> -->
        <!-- <el-table-column prop="sex" label="性别"> -->
        <!-- <el-table-column prop="birthday" label="生日" /> -->
        <el-table-column label="头像">
            <template #default="scope">
                <img :src="scope.row.avatar" alt="用户头像" class="img">
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" />
    </el-table>
</template>

<script setup lang="ts">
import type { AxiosResponse } from 'axios';
import { ref, reactive } from 'vue';
import service from '../../../utils/service';


const total = ref<number>()
// 获取用户总数

const getUserTotal = () => {
    service({
        url: `/statistic/user`
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            total.value = res.data.data
        }
    })
}
getUserTotal()

// 获取用户数据列表
interface IUserData {
    "userid": string,
    "username": string,
    "password": string,
    "tel": string,
    "telcode": string,
    "email": string,
    "nickname": string,
    "qq": string,
    "wx": string,
    "avatar": string,
    "sex": number,
    "birthday": string,
    "createTime": string
}
const userData = reactive<IUserData[]>([])


const getUserData = () => {
    service({
        url: `/user/list`
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            userData.length = 0
            userData.push(...res.data.data)
        }
    })
}
getUserData()
</script>

<style scoped>
.img {
    width: 200px;
    height: 150px;
}
</style>